import React, { forwardRef } from 'react';
import './index.scss';
import * as echarts from "echarts";
import ReactECharts from "echarts-for-react";

export interface SafetyGaugeItem {
  /**
   * 百分比值 (0-100)
   */
  percentage: number;
  /**
   * 显示的文字标签
   */
  label: string;
}

export interface SafetyGaugeProps {
  /**
   * 仪表盘数据列表
   */
  items?: SafetyGaugeItem[];

  /**
   * 组件宽度
   */
  width?: number;

  /**
   * 组件高度
   */
  height?: number;

  /**
   * 单个仪表盘宽度
   */
  itemWidth?: number;

  /**
   * 单个仪表盘高度
   */
  itemHeight?: number;

  /**
   * 百分比文字大小
   */
  percentageFontSize?: number;

  /**
   * 标签文字大小
   */
  labelFontSize?: number;

  /**
   * 百分比文字颜色
   */
  percentageColor?: string;

  /**
   * 标签文字颜色
   */
  labelColor?: string;

  /**
   * 仪表盘颜色主题
   */
  gaugeColor?: string;

  /**
   * 指针颜色
   */
  pointerColor?: string;

  /**
   * 项目间距
   */
  gap?: number;

  /**
   * 点击事件
   */
  onClick?: (item: SafetyGaugeItem, index: number) => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性（不会传递到DOM）
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const SafetyGauge = forwardRef<HTMLDivElement, SafetyGaugeProps>(function SafetyGauge({
  items = [
    { percentage: 85, label: '候车厅' },
    { percentage: 92, label: '到达层' },
    { percentage: 78, label: '出租车' },
    { percentage: 88, label: '地铁' },
    { percentage: 75, label: '长运' },
    { percentage: 90, label: '网约车' }
  ],
  width = 500,
  height = 320,
  itemWidth = (width - 20) / 3, //padding有10，宽高需要减去20
  itemHeight = (height - 20) / 2,
  percentageFontSize = 14,
  labelFontSize = 14,
  percentageColor = '#00D4FF',
  labelColor = '#FFFFFF',
  gaugeColor = '#00D4FF',
  pointerColor = '#FF6B6B',
  gap = 20,
  onClick,
  style = {},
  className = '',
  __designMode,
  componentId,
  _componentName,
  forwardRef: forwardRefProp,
  ...otherProps
}, ref) {

  // 创建单个仪表盘的配置
  const createGaugeOption = (item: SafetyGaugeItem) => {
    const safePercentage = Math.max(0, Math.min(100, item.percentage));

    return {
      series: [
        // 最外层两侧弧度显示颜色
        {
          type: "gauge",
          radius: "98%",
          center: ["50%", "50%"],
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          splitNumber: 2,
          axisLine: {
            lineStyle: {
              width: 2,
              color: [[1, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(0, 0, 0, 0)' },
                { offset: 0.5, color: 'rgba(0, 139, 255, 1)' },
                { offset: 1, color: 'rgba(0, 0, 0, 0)' }
              ])]],
            },
          },
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 3 ,
            distance: 26,
            lineStyle: {
              width: 0.5,
              color: 'rgba(0, 255, 241, 1)'
            }
          },
          splitLine: { show: false },
          axisLabel: {
            show: false,
          },
          pointer: { show: false },
          detail: { show: false },
        },
        // 内侧满色半圆
        {
          type: "gauge",
          radius: "40%",
          center: ["50%", "50%"],
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            lineStyle: {
              width: 60,
              color: [
                [1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(0, 139, 255, 0.5)' },
                  { offset: 1, color: 'rgba(0, 191, 255, 0.5)' }
                ])]
              ]
            },
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          pointer: { show: false },
          detail: { show: false },
        },
        // 主色圆弧
        {
          type: "gauge",
          radius: "80%",
          center: ["50%", "50%"],
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            lineStyle: {
              width: 10,
              color: [
                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#2A83E4' },
                  { offset: 0.56, color: '#008BFF' },
                  { offset: 1, color: '#00FFF1' }
                ])],
              ]
            },
          },
          pointer: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: { show: false },
        },
        // 中心指针
        {
          type: "gauge",
          radius: "90%",
          center: ["50%", "50%"],
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          axisLine: { show: false },
          pointer: {
            show: true ,
            icon: 'triangle',
            length: '60%', // 设置长度以适应设计
            width: 5, // 可以设置更宽的指针
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0.66, 0.76, 0.34, 0.24, [
                { offset: 0, color: '#0F3A62' },
                { offset: 1, color: '#41FFD6' }
              ]),
              borderColor: "#4EE2E9",
              borderWidth: 1,
            },
          },
          data: [{value: safePercentage, name: ''}],
          // itemStyle: {
          //   color: new echarts.graphic.LinearGradient(0.66, 0.76, 0.34, 0.24, [
          //     { offset: 0, color: '#0F3A62' },
          //     { offset: 1, color: '#41FFD6' }
          //   ]),
          //   borderColor: "#4EE2E9",
          //   borderWidth: 1,
          // },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: { show: false },
          title: { show: false },
        },
        {
          type: "pie",
          radius: "7%",
          center: ["50%", "50%"],
          label: { show: false },
          data: [
            {
              value: 0,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#2B8CE6' },
                  { offset: 1, color: '#41FFD6' }
                ]),
              }
            }
          ]
        },
        {
          type: 'gauge',
          center: ['45%', '48%'],
          startAngle: 190,
          endAngle: -10,
          min: 0,
          zlevel: 10,
          max: 100,
          splitNumber: 12,
          progress: { show: false },
          pointer: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: {
            show: true,
            distance: -19,
            formatter: function (value) {
              if (value === 0) {
                return value;
              }
              return '';
            },
            color: '#B9DFFF',
            fontSize: percentageFontSize,
          },
          anchor: { show: false },
          detail: { show: false },
          data: [{ value: 0 }],
        },
        // 内圈
        {
          radius: "60%",
          type: 'gauge',
          center: ['50%', '50%'],
          startAngle: 180,
          endAngle: 0,
          min: 0,
          zlevel: 10,
          max: 100,
          progress: { show: false },
          pointer: { show: false },
          axisLine: {
            lineStyle: {
              width: 1,
              color: [
                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: 'rgba(0,139,255,0)' },
                  { offset: 0.1, color: 'rgba(0,139,255,0.5)' },
                  { offset: 0.5, color: 'rgba(0,139,255,1)' },
                  { offset: 0.9, color: 'rgba(0,139,255,0.5)' },
                  { offset: 1, color: 'rgba(0,139,255,0)' }
                ])],
              ]
            },
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: {
            show: false,
          },
        },
      ]
    };
  };

  const containerStyle: React.CSSProperties = {
    width,
    height,
    boxSizing: 'border-box',
    ...style
  };

  const gridStyle: React.CSSProperties = {
    width: '100%',
    height: '100%',
    display: 'flex',
    flexWrap: 'wrap',
    boxSizing: 'border-box'
  };

  return (
    <div ref={ref} className={`hzdz-safety-gauge ${className}`} style={containerStyle} {...otherProps}>
      <div style={gridStyle}>
        {items.map((item, index) => (
          <div
            key={index}
            className="gauge-item"
            style={{
              position: 'relative',
              width: itemWidth,
              height: itemHeight
            }}
            onClick={() => onClick?.(item, index)}
          >
            <ReactECharts
              option={createGaugeOption(item)}
              style={{ height: '100%', width: '100%'}}
            />
            <div className="info">
              <div className="percentage-wrapper">
                <div className="percentage">{item.percentage}%</div>
              </div>
              <div className="title">{item.label}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
})


SafetyGauge.displayName = 'SafetyGauge';

export default SafetyGauge;
